<template>
	<el-form ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto"
		v-loading="isLoading">
		<el-row :gutter="30">
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.fieldName' prop='fieldName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.fieldName' clearable
						:placeholder='prompt?.fieldName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unit' prop='unit'>
					<el-input v-model.trim='formInline.unit' clearable :placeholder='prompt?.unit' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.fieldAlias' prop='fieldAlias'>
					<el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.fieldAlias' clearable
						:placeholder='prompt?.fieldAlias'
						:formatter="(value) => value.replace(NAME_REG.inputFormat, '')"
						:parser="(value) => value.replace(NAME_REG.inputFormat, '')" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.dataType' prop='dataType'>
					<el-select v-model='formInline.dataType' clearable :placeholder='prompt?.dataType'
						:style="{ width: '100%' }">
						<el-option v-for="item in DATA_UNIT" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
			</re-col>
			<!-- <re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.cateGory' prop='cateGory'>
					<el-select v-model='formInline.cateGory' clearable :placeholder='prompt?.cateGory'
						:style="{ width: '100%' }">
						<el-option v-for="item in DATA_CATEGORY" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
			</re-col> -->
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.isShow' prop='isShow'>
					<el-radio-group v-model='formInline.isShow'>
						<el-radio v-for="item in IS_SHOW" :key="item.value" :value="item.value">
							{{ isNullOrEmpty( item.label ) }}
						</el-radio>
					</el-radio-group>
					<div class="ml-[20px] text-[#999999]">注：此项控制设备实时数据及数据历史记录列表项的显示</div>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.remark' prop='remark'>
					<el-input v-model='formInline.remark' :autosize="{ minRows: 4 }" type="textarea" clearable
						:placeholder='prompt?.remark' />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/product-management/product-type/data-structure/index';
import { DATA_UNIT, IS_SHOW, DATA_CATEGORY } from '@/constant/product-management'
import { NAME_REG } from '@/constant/index'
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const formRules = reactive(<FormRules>{
	id: [{ required: true, message: prompt?.id, trigger: 'blur' },],
	fieldName: [{ required: true, message: prompt?.fieldName, trigger: 'blur' },],
	// unit: [{ required: true, message: prompt?.unit, trigger: 'blur' },],
	fieldAlias: [
		{ required: true, message: prompt?.fieldAlias, trigger: 'blur' },
		{ pattern: NAME_REG.role, message: NAME_REG.text, trigger: 'blur' },
	],
	dataType: [{ required: true, message: prompt?.dataType, trigger: 'blur' },],
	cateGory: [{ required: true, message: prompt?.cateGory, trigger: 'blur' },],
	isShow: [{ required: true, message: prompt?.isShow, trigger: 'blur' },],
});
const ruleFormRef = ref();
//    const newFormInline = ref(props.formInline as any);
//
//
//    watch(()=>props.formInline,()=>{
//    	newFormInline.value = props.formInline
//    },{
//    	deep:true,
//    	immediate:true
//    })
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
